<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>酒店高级查询</title>
<meta name="viewport"
      content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<link rel="stylesheet" type="text/css" href="/hodelcss/common.css">
<link rel="stylesheet" type="text/css" href="/hodelcss/index.css">
<link rel="stylesheet" type="text/css" href="/hodelcss/mui.min.css"/>
<link rel="stylesheet" href="/hodelcss/reset.css">
<script src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/hodeljs/iscroll.js"></script>
<script type="text/javascript" src="/hodeljs/jquery.flexslider-min.js"></script>
<script src="/hodeljs/hmt.js" type="text/javascript"></script>
<script type="text/javascript" src="/hodeljs/index.js"></script>
<script src="/hodeljs/swiper.min.js" type="text/javascript"></script>
<script src="/js/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/myStrategyComment.css"/>
<script src="/js/plugins/jrender/jrender.min.js"></script>
<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
<script src="/js/plugins/dialog2/dialog.min.js"></script>
<script src="/js/jquery/jquery.form.js"></script>
<script src="/js/common.js"></script>
<!--<script src="/hodeljs/other.js" type="text/javascript"></script>-->
<link rel="stylesheet" href="/js/plugins/chosen/component-chosen.css"/>
<script src="/js/plugins/chosen/chosen.jquery.js"></script>


</head>
<body>
<header class="hasManyCity hasManyCitytwo" id="header">
    <a href="/hotelindex.html" class="fl fanhui"><i class="fa fa-chevron-left fa-2x" style="color: white"></i></a>
</header>
<!-- screening -->
<div class="screening">
    <ul id="bands">
        <li class="Brands" data-order="h.sequence">按照酒店热度排序</li>
        <li class="Brands" data-order="h.price">按照价格排序</li>
    </ul>
</div>


<div id="container">
    <div id="main">
        <div class="guess-like">
            <dl>
                <form id="detailForm" method="get" action="/hotel">
                    <span> 酒店名称:<input id="keyword" name="keyword" placeholder="请输入酒店名字"/></span>
                    <label>酒店所在地区:</label>
                    <select class="form-control" id="regions" name="regionId" style="size: 100px">
                        <option value="-1">请选择</option>
                    </select>
                    <input id="query" type="button" value="精确搜索"/>
                </form>
            </dl>
            <dl class="list" render-loop="list">
                <dd>
                    <dl class="list">
                        <dd>
                            <a render-fun="sethref" render-key="list.id" data-href="/hotelComment.html?id="
                               class="react">
                                <div class="dealcard">
                                    <div class="dealcard-img imgbox">
                                        <span></span>
                                        <img render-src="list.coverUrl"/>
                                    </div>
                                    <div class="dealcard-block-right">
                                        <div class="dealcard-brand single-line" render-html="list.name">店名</div>
                                        <div class="title text-block" render-html="list.address">地址</div>
                                        <div class="price">
                                            <span class="tag">优惠价:</span>
                                            <span class="strong" render-html="list.price"></span>
                                            <span class="strong-color">元</span>
                                            </br>
                                            <span class="line-right" render-html="list.time">
                                                        24小时随时入住
										            </span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </dd>
                    </dl>
                </dd>
            </dl>

        </div>
    </div>
</div>
<script>
    //发送异步请求获取旅游地点的数据
    $(function () {
        $.get("/regions", function (data) {
            var html = "";
            //遍历JSON数据拼接到旅游地点下拉框中
            $.each(data, function (index, ele) {
                html += "<option value='" + ele.id + "'>" + ele.name + "</option>"
            })

            $("#regions").html(html);
            //对下拉框使用JqueryChosen插件
            $("#regions").chosen();
        })
    })
</script>

<script>
    $(function () {
        var regionId;
        var keyword;


        $("#query").click(function () {
            console.log("进行精确查询");
            $("#detailForm").ajaxSubmit({
                    beforeSubmit: function (params, form, options) {
                        regionId = params.regionId
                        keyword = params.keyword
                    },
                    success: function (data) {
                        console.log(data);
                        //直接重新渲染!
                        $("#regions").val(regionId)
                        $("#main").renderValues(data, {
                            sethref: function (item, value) {
                                var data = $(item).data("href");
                                $(item).attr("href", data + value);
                            }
                        })

                    }
                }
            )
        })

    })
</script>


<script>
    $(function () {
        //接收请求参数


        var params = getParams();
        if (params.hotelType) {
            //发送get请求 获取所有这个hotelType类型的商品
            //假如有id,那么移除掉这个表单
            $("#detailForm").remove()
            $.get("/hotel", {pageSize: 0, hotelType: params.hotelType}, function (data) {
                console.log(data);
                $("#main").renderValues(data, {
                    sethref: function (item, value) {
                        var data = $(item).data("href");
                        $(item).attr("href", data + value);
                    }
                })
            })
        } else {
            //发送get请求 获取所有这个hotelType类型的商品
            $("#bands").remove()
            $.get("/hotel", {pageSize: 0}, function (data) {
                $("#main").renderValues(data, {
                    sethref: function (item, value) {
                        var data = $(item).data("href");
                        $(item).attr("href", data + value);
                    }
                })
            })
        }



        //给高级查询条件绑定点击事件
        $(".Brands").click(function () {
            var orderBy = $(this).data("order");
            //感谢jrender可以自动覆盖之前渲染数据,不然我真不知道怎么办了
            $.get("/hotel", {
                orderBy: orderBy,
                pageSize: 30,
                hotelType: params.hotelType
            }, function (data) {
                $("#main").renderValues(data, {
                    sethref: function (item, value) {
                        var data = $(item).data("href");
                        $(item).attr("href", data + value);
                    }
                })
            })
        })

    })
</script>


</body>
</html>
